<template>
  <el-dropdown>
    <div class="el-dropdown-link">视频监控</div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="videoPopup" v-if="flag"
          >查看监控</el-dropdown-item
        >
        <el-dropdown-item disabled v-if="!flag">查看监控</el-dropdown-item>
        <el-dropdown-item @click="closeClick">退出监控</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <!-- popup弹窗 -->
  <div id="video-popup" class="video-popup">
    <a href="#" id="video-popup-closer" class="video-popup-closer"></a>
    <div class="title">
      <span>摄像头：{{ cameraId }}</span>
    </div>
    <table>
      <tr>
        <td>
          <b>位置：</b>
        </td>
        <td style="color: #777">{{ address }}</td>
      </tr>
      <tr>
        <td colspan="2">
          <video
            src="../../../assets/video/video.mp4"
            controls
            autoplay
            muted
          ></video>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { Point } from '../../../utils/Point';

const $map = ref(null);
const flag = ref(true);
const cameraId = ref(null); //相机编号
const address = ref(null); //地址
const popup = ref(null);
var container;

onMounted(() => {
  $map.value = inject('$map');
});

// 视频监控
function videoPopup() {
  flag.value = false;
  // 将popup转换成overlay
  container = document.getElementById('video-popup');
  var closer = document.getElementById('video-popup-closer');
  popup.value = new ol.Overlay({
    //要转换成overlay的HTML元素
    element: container,
    //当前窗口可见
    autoPan: true,
    //Popup放置的位置
    positioning: 'bottom-center',
    //是否应该停止事件传播到地图窗口
    stopEvent: true,
    autoPanAnimation: {
      //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
      duration: 250,
    },
  });
  $map.value.addOverlay(popup.value);

  //添加关闭按钮的单击事件（隐藏popup）
  closer.onclick = function () {
    //未定义popup位置
    popup.value.setPosition(undefined);
    //失去焦点
    closer.blur();
    return false;
  };

  // 监听点击地图要素
  $map.value.on('click', handleClick);
}

// 点击地图执行
const handleClick = (e) => {
  document.querySelector('video').load();
  const position = e.coordinate;
  const service = {
    name: 'guanggu',
    layerId: 3,
  };
  Point.query({
    position,
    service,
    callback,
  });
  function callback(e) {
    if (e.SFEleArray.length != 0) {
      cameraId.value = e.SFEleArray[0].AttValue[1];
      address.value = e.SFEleArray[0].AttValue[2];
      popup.value.setPosition(position);
      container.style.display = 'block';
    }
  }
};
function closeClick() {
  flag.value = true;
  $map.value.un('click', handleClick);
  popup.value.setPosition(undefined);
}
</script>

<style lang="scss" scoped>
// 下拉框样式
.el-dropdown {
  height: 100%;
  display: flex;
  align-items: center;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  :deep(:focus-visible) {
    outline: none !important;
  }
}
// popup弹窗样式
.video-popup {
  position: absolute;
  width: 240px;
  background-color: white;
  padding-bottom: 18px;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  border: 1px solid #cccccc;
  border-radius: 5px;
  display: none;
  bottom: 45px;
  left: -50px;
  z-index: 999;

  &:after,
  &:before {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }

  &:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }

  .video-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }

  .video-popup-closer:after {
    content: '✖';
  }

  .title {
    background-color: #2196f3;
    padding: 4px 3px;
    font-size: 13px;
    color: #fff;
    border-radius: 5px 5px 0 0;
  }

  table,
  tr,
  td {
    border: 1px solid #ccc;
    border-spacing: 0;
    border-collapse: collapse;
    padding: 4px;
    min-width: 70px;
  }

  table {
    margin: 7px;
    font-size: 14px;

    video {
      width: 215px;
      height: 135px;
      margin: 0;
    }
  }
}
</style>
